<script setup>
// 引入所需组件和图标
import { Search } from '@element-plus/icons-vue'
import { ref} from 'vue'
import { useRouter } from 'vue-router'
import request from '@/api/request'
import { ElMessage, ElMessageBox } from 'element-plus'
let emits=defineEmits(["ref-table"])
let router = useRouter();

// 新增：保存选中的完整行数据（用于修改）
let selectedRow = ref({})
let title = ref("") // 对话框标题
let isVisible = ref(false) // 对话框显示状态
let classifyId=ref([]);

let page = ref({
    current: 1,
    size: 10,
    total: 0,
    records: []
})

let data=ref()
let classify = ref({
    classifyName: '',
    isEnabled:''
})

const handleSearch = () => {
    page.value.current = 1;
    loadData();
}


let loadData = () => {
    request({
        url: '/classify/index',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            classifyName: classify.value.classifyName,
            isEnabled:classify.value.isEnabled
        }
    }).then(res => {
        page.value = res.data
        page.value.records.sort((a, b) => a.sort - b.sort)
        page.value.records.forEach(item=>{
            item.disabled = false;
        })
    }).catch(err => {
        ElMessage.error('数据加载失败')
    })
}

loadData();

let refTanle = () => {
    isVisible.value = false;
    loadData();
}
let toInsert = (row) => {
    title.value = "新增分类";
    data.value=row;
    isVisible.value = true;
    router.push("/material/classify/insert");
}



let toUpdate = (row) => {
    data.value = { ...row };
    title.value = "修改分类";
    isVisible.value = true;
    if(row!=null){
        data.value=row;
    }else{
        data.value=processRouteId.value[0]
    }
    router.push("/material/classify/update");
}



let  formRef =ref()
//重置
let chongzhi=()=>{
    classify.value={
    classifyName:"",
    isEnabled:"",
    
    }
    handleSearch()
    // formRef.value.resetFields();
}
</script>
<template>
    <div>
      <el-row>
                       
                        <el-col >
                    <!-- 搜索表单区域 -->
                     <el-form ref="formRef" inline :model="classify"
                                style="display: flex;justify-content: start;" class="card_wrap">
                                <el-form-item label="分类名称" size="default" prop="classifyName" class="c_item">
                                    <el-input v-model="classify.classifyName" class="sousuo"
                                        placeholder="请输入分类名称" clearable @change=""></el-input>
                                </el-form-item>
                                <el-form-item label="是否启用"  prop="isEnabled" class="c_item">
                                    <el-select placeholder="选择是或否" v-model="classify.isEnabled" style="width: 150px;">
                                    <el-option value="0" label="是"></el-option>
                                    <el-option value="1" label="否"></el-option>
                            </el-select>
                                </el-form-item>
                                <el-form-item class="c_item">
                                    <template #default>
                                        <el-button type="primary" size="default" @click="handleSearch" icon="Search">搜索</el-button>
                                        <el-button type="info" size="default" :plain=true @click="chongzhi" icon="Refresh">重置</el-button>
                                        <p></p>
                                    </template>
                                </el-form-item>
                               
                            </el-form>
                             <div style="margin-top: 20px;">
                                <el-button @click="toInsert" type="primary" :plain="true" :icon="Plus">添加</el-button>
                               </div>

                   

                   <el-table :data="page.records"  stripe >
                                <el-table-column  width="40px" />
                                
                               <el-table-column prop="classifyName" label="分类名称"/>
                                <el-table-column prop="sort" label="排序" sorttable/>
                                <el-table-column prop="materialOrProduct" label="物料/产品" #default="scope">
                                    <el-tag :type="scope.row.materialOrProduct=='0' ? 'primary':'danger'">{{ scope.row.materialOrProduct=="0"?"物料":"产品"}}</el-tag>
                                </el-table-column>    
                                <el-table-column prop="isEnabled" label="是否启用" #default="scope">
                                    <el-tag :type="scope.row.isEnabled=='0' ? 'primary':'danger'">{{ scope.row.isEnabled=="0"?"是":"否"}}</el-tag>
                                </el-table-column>
                                <el-table-column prop="createTime" label="创建时间"/>

                                <el-table-column label="操作" style="width: 1000px;"fixed="right">
                            <template #default="scope" style="width: 1000px;">
                                <el-button size="small" type="success" @click="toInsert(scope.row)" :row="scope.row"  icon="Plus">添加</el-button>
                                 <el-button size="small" type="primary" @click="toUpdate(scope.row)" :row="scope.row"  icon="Edit">修改</el-button>
                             
                            </template>
                        </el-table-column>
                            </el-table>
                        <el-pagination @current-change="(val) => { page.current = val; loadData() }" 
                                v-model:currentPage="page.current"
                                :page-sizes="[2, 4, 6, 8, 10]" :page-size="page.size" :total="page.total" background>
                            </el-pagination>
                 </el-col>
                    </el-row>

            <!-- 表单弹窗 -->
            <div style="width:800px">
                        <el-dialog :title="title" v-model="isVisible" :destroy-on-close="true" width="60%">
                            <router-view @ref-table="refTanle" :data="data">
                            </router-view>
                        </el-dialog>
                    </div>
    </div>
</template>



<style scoped>
/* 表格顶部间距 */
.el-table {
    margin-top: 15px;
}
</style>